<template>
	<view class="userInfo">
		<!-- 背景图 -->
		<!-- <image class="userBg" :src="image" mode="aspectFill"></image> -->
		<!-- 遮罩层 -->
		<!-- 用户信息 -->
		<view class="userData" :style="{ backgroundImage: `url(${userData.background?userData.background:'https://www.25175.net/images/mybg.jpg'})` }" >
			<!-- <view class="wrap"></view> -->
			<view class="infomation">
				<view>
					<image class="touxiang" @click="priview(userData.avatar)"  :src="userData.avatar?userData.avatar:'/static/images/logo.png'" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="username">{{ userData.realname?userData.realname:userData.nickname?userData.nickname:userData.username  }} <span v-if="userData.age" style="margin-left: 20rpx;font-size: 34rpx;">{{userData.age}} 岁</span> </view>
					<view class="num">
						<view>
							<span>{{nums.familyCount}}</span>
							家庭
						</view>
						<view>
							<span>{{nums.articleCount}}</span>
							文章
						</view>
						<view>
							<span>{{nums.lifeCount}}</span>
							生活
						</view>
					</view>
				</view>
			</view>
			<view class="tags">
				<view class="btns" v-if="userData.checkinRsp && userData.checkinRsp.checkinDate &&  userData.checkinRsp.checkinDate == today">
					<span  style="width: 170rpx;"  >已签到</span>
				</view>
				<view class="btns" @click="qiandao" v-else>
					<span  style="width: 170rpx;"  >今日签到</span>
				</view>
				<view class="btns" @click="toPay"  v-if="showPayment">
					<span  style="width: 170rpx;"  >购买套餐</span>
				</view>
				<view class="btns" @click="toPage('/pages/tabbar/mine/editmy')" >
					<span  style="width: 170rpx;"  >编辑资料</span>
				</view>
				<view class="btns" @click="$emit('share')"  >
					<span  style="width: 170rpx;"  ><i class="iconfont" style="font-size: 42rpx;">&#xe6e8;</i></span>
				</view>
				<view class="btns" @click="toPage('/pages/tabbar/mine/setting')" >
					<span  style="width: 170rpx;"  ><i class="iconfont saoma" style="font-size: 49rpx;font-weight: bold;">&#xe604;</i></span>
				</view>
			</view>
			
		
			
			<view  v-if="showPayment">
				<view class="desc" v-if="userData.checkinRsp" @click="toPay">
					<view class="small">
						剩余：{{userData.checkinRsp.remainFamilyCoin}}家庭币
						{{userData.checkinRsp.remainSpace}}M 空间
						<i class="iconfont">&#xe65f;</i>
					</view>
				</view>
				<view class="desc" v-if="!userData.checkinRsp" @click="toPay">
					<view class="small">
						购买套餐
						<i class="iconfont">&#xe65f;</i>
					</view>
				</view>
			<!-- 	<view class="Ip" v-if="userData.checkinRsp && userData.checkinRsp.privilegePeriodValidUntil">
				 套餐到期时间：{{userData.checkinRsp.privilegePeriodValidUntil}}
				</view> -->
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		props: {
			username: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				Ip: "",
				userData: {
					avatar: '',
					username: '',
					realname: '',
					nickname: '',
					checkinRsp:{
						checkinDate:''
					}
				},
				today:dayjs().format('YYYY-MM-DD'),
				showPayment:uni.getStorageSync('showPayment')?uni.getStorageSync('showPayment'):false,
				image: 'https://img0.baidu.com/it/u=1315149873,824989522&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',	
				nums: {
					articleCount: 0,
					familyCount: 0,
					lifeCount: 0,
				}
			};
		},
		created() {
			this.getIp()
			this.getmySummary()
		},
		methods: {
			qiandao(){
				this.$api.checkin().then(res=>{
					this.$Show.show('签到成功')
					this.userData.checkinRsp.checkinDate = this.today;
					this.userData.remainFamilyCoin = res.remainFamilyCoin;
					this.userData.remainSpace = res.remainSpace;
					this.$forceUpdate()
				})
			},
			toPay(){
				uni.navigateTo({
					url:'/pages/pay/index'
				})
			},
			backPage() {
				uni.navigateBack()
			},
			getIp() {
				uni.request({
					url: 'http://pv.sohu.com/cityjson?ie=utf-8',
					method: 'POST',
					success: (res) => {
						const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
						this.Ip = reg.exec(res.data)[0];
					}
				})
			},
			getmySummary() {
				this.$api.mySummary().then(res => {
					console.log(res)
					this.nums = res
				})
			},
			saoma() {
				// #ifdef H5
				this.$Show.show('当前环境不支持扫码')
				// #endif

				// #ifndef H5
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
				// #endif
			},
			priview(img){
				uni.previewImage({
					urls:[img],
					current:0
				})
			},
			toPage(url) {
				console.log(url);
				uni.navigateTo({
					url
				});
			},
			init(data) {
				this.userData = data;
				console.log(data);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.userInfo {
		width: 100%;
	}

	.userBg {
		width: 100%;
		height: 100%;
	}

	.wrap {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.userData {
		// position: absolute;
		// left: 40rpx;
		// right: 40rpx;
		// bottom: 0;
		// top: 70rpx;
		// z-index: 10;
		padding: 70rpx 20% 80rpx 20%;
		box-sizing: border-box;
		background-size: 100% 100%;
		position: relative;
		background-size: cover;
		

		.head {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.saoma {
				color: #fff;
				font-size: 40rpx;
				padding: 16rpx;
				background-color: rgba(0, 0, 0, 0.3);
				border-radius: 50%;
				margin-right: 120rpx;
			}

			.right {
				display: flex;
				align-items: center;
				position: absolute;
				right: 20rpx;
				top: 37%;
				z-index: 10;

				.saoma {
					margin-left: 30rpx;
				}

				.fabu {
					display: flex;
					align-items: center;
					color: #fff;
					font-size: 25rpx;
					padding: 16rpx;
					background-color: rgba(0, 0, 0, 0.3);
					border-radius: 30rpx;

					.iconfont {
						margin-right: 10rpx;
						display: block;
						font-size: 35rpx;
					}
				}
			}
		}

		.infomation {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.touxiang {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 1px solid #fff;
				margin-right: 40rpx;
			}

			.defaultTx {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 1px solid #e3d803;
				background-color: #e3d803;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
			}

			.right {
				display: flex;
				flex-direction: column;

				.username {
					font-size: 56rpx;
					color: #fff;
					margin-bottom: 30rpx;
				}

				.num {
					display: flex;
					align-items: center;

					view {
						color: #fff;
						margin-right: 30rpx;
						font-size: 32rpx;

						span {
							font-size: 36rpx;
							margin-right: 4px;
						}
					}
				}
			}
		}

		.tags {
			display: flex;
			align-items: center;
			.tag {
				display: flex;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.3);
				border-radius: 10rpx;
				color: #fff;
				width: 120rpx;
				height: 70rpx;
				justify-content: center;
				margin-right: 20rpx;
				
				.iconfont {
					margin-right: 8rpx;
					font-size: 28rpx;
				}
			}
		}

		.desc {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;

			.title {
				margin-bottom: 10rpx;
				color: #fff;
				font-size: 30rpx;
			}

			.small {
				color: #fff;
				font-size: 30rpx;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 28rpx;
					margin-left: 3px;
				}
			}
		}

		.Ip {
			font-size: 28rpx;
			margin-top: 20rpx;
			color: #ededed;

			.iconfont {
				font-size: 28rpx;
				margin-left: 3px;
			}
		}

		.btns {
			display: flex;
			align-items: center;

			span {
				// padding: 10rpx 40rpx;
				    width: 180rpx;
				    height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(0, 0, 0, 0.3);
				color: #fff;
				margin-right: 20rpx;
				border-radius: 10rpx;
				cursor: pointer;
			}
		}
	}
</style>